<template>
	<view class="box">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					选择资费模板：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="tempChange($event, item, index)" :value="changeIndex" :range="templateBox"
						range-key="name">
						<view class="uni-input">{{ form.name }}</view>
					</picker>
				</view>
			</view>
		</view>
		<uni-card title="" extra="">
			<template v-slot:title>
				<view style="border-bottom: 1px solid #E6E6E6;">
					<view style="padding: 10px; float: left;">
						<text>{{ form.name }}</text>
					</view>
					<view class="clear"></view>
				</view>
			</template>
			<costType :form="form"></costType>
		</uni-card>
		<!-- 更改资费提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog @confirm="saveAlert()" type="success" title="提示"
				content="更改后充电柜将更新为新的资费模式进行运营，正在进行中的订单按原收费模式计费。确认更改？"></uni-popup-dialog>
		</uni-popup>
		<view style="margin: 50rpx 4%; text-align: center;">
			<button :loading="editLoading" @click="save()" type="primary" size="mini"
				style="margin-right: 20rpx; background-color: #4DA7FF; width: 48%; height: 80rpx; line-height: 80rpx;">确定</button>
			<button @click="back()" type="primary" size="mini"
				style="background-color: #C2C2C2; width: 48%; height: 80rpx; line-height: 80rpx;">取消</button>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		chargeTmpl
	} from '@/api/equip.js';
	import costType from "@/components/costType.vue";
	export default {
		components: {
			costType
		},
		data() {
			return {
				templateBox: [],
				form: {},
				changeIndex: '',
				optionBox: {},
				editLoading: false,
				msgType: '',
				messageText: '',

				chargeId: '', //资费模板id
				equipid: '', //充电柜id
				code: '', //充电柜code
			}
		},
		onLoad(option) {
			this.optionBox = option;
			this.code = option.code;
			this.chargeId = option.chargeId;
			this.equipid = option.equipid;
			this.getChargeTmpl();
		},
		created() {
		},
		methods: {
			getChargeTmpl() {
				// 获取资费模板信息
				this.$Toast.loading('加载中···')
				chargeTmpl('/getChargeTmplById', 'get', {
						id: this.chargeId
					}).then(res => {
						this.getCost();
						uni.hideLoading();
						let datas = res.data;
						datas.duration = datas.chargeTmplPriceList.filter(item => item.type == 'DURATION' || item
							.type == '按时'); //按时
						datas.quantity = datas.chargeTmplPriceList.filter(item => item.type == 'QUANTITY' || item
							.type == '按量'); //按量

						this.form = datas;
					})
					.catch(err => {
						uni.hideLoading();
					})
			},

			// 更换模板
			tempChange(e, item, index) {
				this.changeIndex = e.detail.value;
				this.chargeId = this.templateBox[e.detail.value].id;
				this.getChargeTmpl();
			},
			// 获取资费模板
			getCost() {
				chargeTmpl('/selectProgram', 'get', {
						type: 0,
						pageSize:100
					}).then(res => {
						this.templateBox = res.data.records;
						 this.changeIndex =this.templateBox.findIndex((item) => item.id == this.form.id);
					})
					.catch(err => {

					})
			},
			// 保存修改
			save() {
				this.$refs.alertDialog.open();
			},
			saveAlert() {
				this.$Toast.loading('修改中···')
				chargeTmpl(`/updateChargeTmplById?chargingCabinetId=${this.equipid}&chargeTmplId=${this.chargeId}`, 'put')
					.then(res => {
						if (res.code == 200) {
							this.$Toast.success('修改成功');
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let page = getCurrentPages().pop(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 上一页
								uni.navigateBack({
									success: function() {
										beforePage.onLoad(page.options); // 执行上一页的onLoad方法
									}
								});
							}, 1000)
						}
					})
					.catch(err => {})
			},
			// 返回
			back() {
				let pages = getCurrentPages(); // 当前页面
				let page = getCurrentPages().pop(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				uni.navigateBack({
					success: function() {
						beforePage.onLoad(page.options); // 执行上一页的onLoad方法
					}
				});
				// uni.navigateBack({
				// 	success: () => {
				// 		let page = getCurrentPages().pop();  //跳转页面成功之后
				// 		if (!page) {
				// 			return;
				// 		} else {
				// 			page.onLoad(page.options);// page自带options对象.
				// 		}
				// 	}
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/static/css/common.scss";

	/deep/ .uni-card {
		padding: 10px !important;
	}

	/deep/ .uni-table-tr {
		display: block !important;
		width: 100% !important;
		background-color: #EFF8FF !important;
		color: #346D9C !important;
		border: 1px solid #FFFFFF !important;
	}

	/deep/ .uni-table-td {
		display: block !important;
		width: 100% !important;
		color: #000000 !important;
		border: 1px solid #FFFFFF !important;
		padding: 5px !important;
		vertical-align: middle !important;
	}

	/deep/ .uni-table-th {
		display: block !important;
		width: 100% !important;
		color: #346D9C !important;
		border: 1px solid #FFFFFF !important;
		padding: 5px !important;
	}

	/deep/ button::after {
		border: none;
	}
</style>
